<template>
    <div class="orderDetail-box">
        <div class="header" >
            <h5>订单详细信息 </h5>
            <i class="iconfont icon-close" @click="close"></i>
        </div>
        <div class="content">
            <div class="content-header">
                <p>订单状态：<span class="未完成"> {{ rowDataDetail.invoiceStatus }}</span></p>
                <p>结款状态：<span class="已支付"> {{ rowDataDetail.paymentStatus }}</span></p>
            </div>
            <div class="content-main">
                <div class="list-left">
                    <p>单据编号：</p>
                    <p>{{ rowDataDetail.orderId }}</p>
                </div>
                <div class="list-right">
                    <p>终端门店：</p>
                    <p>{{ rowDataDetail.customerStore }}</p>
                </div>
                <div class="list-left">
                    <p>客户名称：</p>
                    <p>{{ rowDataDetail.customerName }}</p>
                </div>
                <div class="list-right">
                    <p>联系人：</p>
                    <p>{{ rowDataDetail.contactPerson }}</p>
                </div>
                <div class="list-left">
                    <p>销售总金额：</p>
                    <p>{{ rowDataDetail.totalOrderAmount }} </p>
                </div>
                <div class="list-right">
                    <p>预计总成本：</p>
                    <p>{{ Number(rowDataDetail.installationFeeTotal) + Number(rowDataDetail.urbanManagementFee) + Number(rowDataDetail.materialFeeTotal) }}</p>
                </div>
                <div class="list-left">
                    <p>实际金额：</p>
                    <p>{{ rowDataDetail.totalQuantity }}</p>
                </div>
                <div class="list-right">
                    <p>实付金额：</p>
                    <!-- <p>{{ rowDataDetail.actualPaymentPrice }}</p> -->
                </div>
                <div class="list-left">
                    <p>交易日期：</p>
                    <p></p>
                </div>
                <div class="list-right">
                    <p>完工日期：</p>
                    <!-- <p>{{ rowDataDetail.deliveryDate?.slice(0, 10) }}</p> -->
                </div>
                <div class="list-left">
                    <p>制单人：</p>
                    <p>{{ rowDataDetail.creator }}</p>
                </div>
                <div class="list-right">
                    <p>开单时间：</p>
                    <p>{{ rowDataDetail.orderDate?.slice(0, 10) }}</p>
                </div>
                <div class="list-left">
                    <p>客户类型：</p>
                    <p>{{ rowDataDetail.customerType }}</p>
                </div>
                <div class="list-right">
                    <p>后期服务：</p>
                    <p>{{ rowDataDetail.afterSalesService }}</p>
                </div>
                <div class="list-left">
                    <p>成本合计：</p>
                    <p>{{ rowDataDetail.totalCost }}</p>
                </div>
                <div class="list-right"></div>

                <div class="desc-list">
                    <div class="desc-left">
                        <p>备注：</p>
                    </div>
                    <div class="desc-right">
                        <el-input v-model="rowDataDetail.remarks" type="textarea" disabled />
                    </div>
                </div>
            </div>
            <div class="content-table">
                <div class="table-define">
                    <el-table :data="rowDataDetail.productionVOS" style="width: 100%; overflow-y: scroll;"
                        max-height="900px" :header-cell-style="{ 'color': '#fff', 'background': `${bg} !important` }">
                        <el-table-column prop="businessType" label="业务类型" align="center" show-overflow-tooltip/>
                        <el-table-column prop="productionContent" label="制作内容" align="center" show-overflow-tooltip/>
                        <el-table-column prop="width" label="高" align="center" show-overflow-tooltip/>
                        <el-table-column prop="height" label="宽" align="center" show-overflow-tooltip/>
                        <el-table-column prop="quantityPerPiece" label="件数" align="center" show-overflow-tooltip/>
                        <el-table-column prop="totalQuantity" label="数量" align="center" show-overflow-tooltip/>
                        <el-table-column prop="unit" label="单位" align="center" show-overflow-tooltip/>
                        <el-table-column prop="salePrice" label="销售单价" align="center" show-overflow-tooltip/>
                        <el-table-column prop="price" label="成本单价" align="center" show-overflow-tooltip/>
                        <!-- <el-table-column prop="price" label="单价" align="center" /> -->
                        <el-table-column prop="materialFee" label="材料费" align="center" show-overflow-tooltip/>
                        <el-table-column prop="installationFee2" label="安装费(按天)" align="center" show-overflow-tooltip/>
                        <el-table-column prop="installationFee" label="安装费(固定)" align="center" show-overflow-tooltip/>
                        <el-table-column prop="urbanManagementFee" label="城管费" align="center" show-overflow-tooltip/>
                        <el-table-column prop="amount" label="金额" align="center" show-overflow-tooltip/>
                    </el-table>
                </div>
                <div class="table-outsourcing">
                    <el-table :data="outsourcingTable" style="width: 100%; overflow-y: scroll;" max-height="300px"
                        :header-cell-style="{ 'color': '#fff', 'background': `${bg} !important` }">
                        <el-table-column prop="outsourcingId" label="外协单号" width="180" align="center" show-overflow-tooltip/>
                        <el-table-column prop="outsourcingName" label="外协商" width="180" align="center" show-overflow-tooltip/>
                        <el-table-column prop="costCategory" label="成本类型" align="center" show-overflow-tooltip/>
                    </el-table>
                </div>
            </div>
            <div class="content-bottom">
                <div class="bottom-left">
                    <p>审批人：</p>
                    <span>{{ rowDataDetail.approver || '暂无' }}</span>
                </div>
                <div class="bottom-right">
                    <p @click="close">关闭</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, defineEmits, defineProps } from 'vue'
const emit = defineEmits(['closePopUps'])
// 表格颜色
let bg = '#1947FF'
// rowDataDetail
const props = defineProps({
    // 订单详情信息
    rowDataDetail: {
        type: Object,
        default: [],
        required: true
    },
  widthMy:{
      type: String,
  }
})

// 订单详情表格信息
let tableData = ref([
    {
        businessType: 'KT展板',
        customerType: '鼬',
        productionContent: '展板',
        width: '1',
        height: '2',
        quantityPerPiece: '2',
        totalQuantity: '2',
        unit: '个',
        unitPrice: '52',
        materialFee: '23',
        installationFee: '22',
        installationFee2: '22',
        urbanManagementFee: '20',
        totalOrderAmount: '2000',
        afterSalesService: '上门',
    },
])
// 表格外协商
let outsourcingTable = ref([
    {
        outsourcingId: '00000000000',
        outsourcingName: '斯巴达',
        costCategory: '月结供应商',
    },
])
// 关闭当前框
const close = () => {
    emit('closePopUps', false)
}

onMounted(() => {
    outsourcingTable.value = props.rowDataDetail.productionVOS
})
</script>
<style scoped lang='scss'>
.orderDetail-box {
    width: 100%;
    height: 100%;
    overflow-y: scroll;

    .未完成 {
        color: red;
    }

    .已支付 {
        color: green;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #1947FF;
        border-radius: 4px 4px 0px 0px;
        padding: 0 30px;
        height: 40px;
      width: 100% ;
        h5 {
            color: #fff;
            font-weight: 600;
        }

        .icon-close {
            border: 1px solid #666;
            color: #1947FF;
            background: #FFFFFF;
        }
    }

    .content {
        padding-top: 40px;
        color: #333333;

        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
        }

        .content-main {
            padding: 0 20px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .list-left,
            .list-right {
                display: flex;
                align-items: center;
                width: 33.33%;

                p {
                    height: 40px;
                    line-height: 40px;
                }
            }

            .desc-list {
                display: flex;
                align-items: center;
                width: 100%;
                .desc-right {
                    margin: 5px 0;

                    .el-textarea {
                        width: 800px;
                    }
                }
            }
        }

        .content-bottom {
            padding: 0 20px;
            display: flex;
            justify-content: space-between;

            .bottom-left {
                margin-top: 10px;
                display: flex;

                p {
                    color: #1947FF;

                }
            }

            .bottom-right {
                margin: 40px 0;

                p {
                    width: 58px;
                    height: 28px;
                    background: linear-gradient(180deg, #D8E0FF 0%, #FFFFFF 100%);
                    box-shadow: 2px 3px 6px 1px rgba(0, 0, 0, 0.16);
                    border-radius: 2px 2px 2px 2px;
                    text-align: center;
                    line-height: 28px;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>
